import React from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import ChatNavigation from './Navigation';
import {useNavigation} from '@react-navigation/native';
import {Box, Checkbox, Pressable, Text, ScrollView, Button, Image} from 'native-base';
const ChatRemoveUser = () => {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  const originUsers = [
    {
      id: 1,
      name: '张三',
      nickname: '三哥',
      position: '前端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    },
    {
      id: 2,
      name: '李四',
      nickname: '四哥',
      position: '后端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    },
    {
      id: 3,
      name: '王五',
      nickname: '五哥',
      position: '产品经理',
      avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    },
    {
      id: 4,
      name: '赵六',
      nickname: '六哥',
      position: 'UI设计师',
      avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    },
    {
      id: 5,
      name: '孙七',
      nickname: '七哥',
      position: '运营经理',
      avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
    },
    {
      id: 6,
      name: '孙八',
      nickname: '八哥',
      position: '测试工程师',
      avatar: 'https://randomuser.me/api/portraits/men/6.jpg',
    },
    {
      id: 7,
      name: '周九',
      nickname: '九哥',
      position: '运维工程师',
      avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
    },
    {
      id: 8,
      name: '吴十',
      nickname: '十哥',
      position: '数据库管理员',
      avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
    },
    {
      id: 9,
      name: '郑十一',
      nickname: '十一哥',
      position: '网络安全工程师',
      avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
    },
    {
      id: 10,
      name: '王十二',
      nickname: '十二哥',
      position: '前端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
    },
    {
      id: 11,
      name: '李十三',
      nickname: '十三哥',
      position: '后端工程师',
      avatar: 'https://randomuser.me/api/portraits/men/11.jpg',
    },
    {
      id: 12,
      name: '张十四',
      nickname: '十四哥',
      position: '产品经理',
      avatar: 'https://randomuser.me/api/portraits/men/12.jpg',
    },
    {
      id: 13,
      name: '赵十五',
      nickname: '十五哥',
      position: 'UI设计师',
      avatar: 'https://randomuser.me/api/portraits/men/13.jpg',
    },
    {
      id: 14,
      name: '钱十六',
      nickname: '十六哥',
      position: '运营经理',
      avatar: 'https://randomuser.me/api/portraits/men/14.jpg',
    },
    {
      id: 15,
      name: '孙十七',
      nickname: '十七哥',
      position: '测试工程师',
      avatar: 'https://randomuser.me/api/portraits/men/15.jpg',
    },
  ];

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#efefef', paddingTop: insets.top, paddingBottom: insets.bottom}} edges={['left', 'right']}>
      <ChatNavigation title="当前成员" showMore={false} />
      <Box flex={1} px={2}>
        <ScrollView mb="2" flex={1}>
          {originUsers.map(user => (
            <Pressable key={user.id} flexDirection="row" alignItems="center" bg="white" p={2} borderRadius={4} my={2}>
              <Image source={{uri: user.avatar}} alt={user.name} size={10} mr={2} />
              <Box>
                <Text fontSize="md" fontWeight="bold">
                  {user.nickname}
                </Text>
                <Text fontSize="sm" color="gray.500">
                  {user.name} {user.position}
                </Text>
              </Box>
              <Box ml="auto" borderWidth={1} borderColor="gray.300" borderRadius={4} size={6} justifyContent="center" alignItems="center">
                <Checkbox aria-label="123" value="test" accessibilityLabel="This is a dummy checkbox" />
              </Box>
            </Pressable>
          ))}
        </ScrollView>
        <Box w="full" p="8" pt="1">
          <Button bg="green.500" onPress={() => navigation.goBack()}>
            <Text bold color="white">
              取消邀请
            </Text>
          </Button>
        </Box>
      </Box>
    </SafeAreaView>
  );
};

export default ChatRemoveUser;
